<template>
  <view class="milestones" :class="isLockScroll?'lockScroll':''">
    <view class="power-tab">
      <view :class="`power-tab-item bg-line-color ${tabIndex == index?'power-tab-item-active':''}`" @click="changeTab(index)" v-for="(item , index) in powerTabs" :key="index">
        <view class="power-tab-item-inner">{{ item }}</view>
      </view>
    </view>
    <view v-if="tabIndex == 0" class="power-body">
      <view class="power-label" style="background-image:url(https://wx.sijiyoufu.com/static/imgs/project/power_share_poi.png);height:163rpx;"></view>
      <view class="power-desc"  v-for="(item,index) in cinemaActivity" :key="index">{{item.key}}：{{item.value}}</view>
      <view class="power-button bg-line-color" @click="popupRef.open()">
        <view class="power-button-inner">
          <uv-icon size="22" name="map" color="#000"></uv-icon>
          选择电影院
        </view>
      </view>
      
      <template v-if="Cinema.cinema">
        <view class="power-cinema-name">{{ Cinema.cinema.name }}</view>
        <view class="power-leave">
          <image
            src="https://wx.sijiyoufu.com/static/imgs/project/power-icon.svg"
            mode="aspectFit"
          />
          {{ Cinema.powerNum }}
        </view>
      </template>
      

      <view class="power-button power-button-fill bg-line-color" @click="powerDialog">
        <view class="power-button-inner">
          点亮影院
        </view>
      </view>
      
      <template v-if="Cinema.milestoneList">
        <view class="power-total">
          共{{Cinema.milestoneList.length}}个里程碑，已解锁{{ Cinema.completedCnt }}个
          <view class="power-total-line"></view>
        </view>
        <view class="power-list-box">
          <view class="power-list-item bg-line-color" v-for="(zt,index) in Cinema.milestoneList" :key="index">
            <view class="imagebox">
              <image :src="`https://wx.sijiyoufu.com/static/imgs/project/power-ciname-step-${index + 1}.png`" class="border-line-color"></image>
            </view>
            <view class="textbox">{{ cinemaPowerTexts[index] }}</view>
            <image
              src="https://wx.sijiyoufu.com/static/imgs/project/power-step-success.png"
              mode="scaleToFill"
              class="power-status"
              v-if="zt.powerNum <= Cinema.powerNum"
            />
            <image
              src="https://wx.sijiyoufu.com/static/imgs/project/power-step-fail.png"
              mode="scaleToFill"
              class="power-status"
              v-else
            />
          </view>
        </view>
      </template>

    </view>
    <view v-else class="power-body">
      <view class="power-label" style="background-image:url(https://wx.sijiyoufu.com/static/imgs/project/power-actor-label.png);width:69%;"></view>
      <view class="power-desc"  v-for="(item,index) in actorActivity" :key="index">{{item.key}}：{{item.value}}</view>
      <view class="power-button bg-line-color" @click="popupRef.open()">
        <view class="power-button-inner">
          <uv-icon size="22" name="account" color="#000"></uv-icon>
          选择选手
        </view>
      </view>
      <template v-if="Actor.player">
        <view class="power-actor-body">
          <image
            :src="Actor.player.logo"
            class="actor-header"
            mode="scaleToFill"
          />
          <view class="actor-name">
            {{ Actor.player.playRole }}
            <text>{{Actor.player.name}}</text>
          </view>
        </view>
        <view class="power-leave">
          <image
            src="https://wx.sijiyoufu.com/static/imgs/project/power-icon.svg"
            mode="aspectFit"
          />
          {{ Actor.powerNum }}
        </view>
      </template>
      <view class="flex-betenwen">
        <view class="power-button power-button-fill bg-line-color" @click="powerDialog">
          <view class="power-button-inner">
            立即助力
          </view>
        </view>
        <view class="power-button power-button-fill bg-line-color" @click="powerShare">
          <view class="power-button-inner">
            分享助力
          </view>
        </view>
      </view>
      
      <template v-if="Actor.milestoneList">
        <view class="power-total">
          共{{Actor.milestoneList.length}}个里程碑，已解锁{{ Actor.completedCnt }}个
          <view class="power-total-line"></view>
        </view>
        <view class="power-list-box">
          <view class="power-list-item bg-line-color" v-for="(zt,index) in Actor.milestoneList" :key="index">
            <view class="imagebox" :style="actorPowerTexts[index] && actorPowerTexts[index].pstyle?actorPowerTexts[index].pstyle:''">
              <image :src="`https://wx.sijiyoufu.com/static/imgs/project/power-actor-step-${index + 1}.png`" class="border-line-color" mode="widthFix" :style="`width:${actorPowerTexts[index] && actorPowerTexts[index].istyle?actorPowerTexts[index].istyle:''}`"></image>
            </view>
            <view class="textbox">{{ actorPowerTexts[index] && actorPowerTexts[index].text?actorPowerTexts[index].text:'' }}</view>
            <image
              src="https://wx.sijiyoufu.com/static/imgs/project/power-step-success.png"
              mode="scaleToFill"
              class="power-status"
              v-if="zt.powerNum <= Actor.powerNum"
            />
            <image
              src="https://wx.sijiyoufu.com/static/imgs/project/power-step-fail.png"
              mode="scaleToFill"
              class="power-status"
              v-else
            />
          </view>
        </view>
      </template>
      
    </view>
    <uv-popup ref="popupRef" round="12" mode="bottom" 
            custom-style="height: 80vh;" 
            bgColor="#f5f5f5" 
            :closeable="true"
            @change="toggleLock"
            closeIconPos="top-right">
            <CinemaList @change="changeCinema" v-if="tabIndex == 0"/>
            <ActorList @change="changeActor" v-else/>
		</uv-popup>
    <uv-modal ref="dialogRef"
      :closeOnClickOverlay='false'
      :showConfirmButton="true"
      :confirmText="myPowerCount > 0?'确认助力':'去获取'"
      :showCancelButton="myPowerCount > 0"
      @confirm="powerConfirm"
    >
      <view class="power-ex">
        <image
            src="https://wx.sijiyoufu.com/static/imgs/project/power-icon.svg"
            mode="aspectFit"
        />
        <template v-if="myPowerCount > 0">
          <view class="power-count">您仍可为{{tabIndex == 0?'影院点亮':'选手助力'}}{{myPowerCount}}票</view>
          <uv-number-box :min="1" button-size="30" :max="myPowerCount" v-model="powerNum">
            <template v-slot:minus>
              <view class="minus">
                <uv-icon name="minus" size="17">
                </uv-icon>
              </view>
            </template>
            <template v-slot:input>
              <text style="width: 50px;text-align: center;" class="input">
                {{powerNum}}
              </text>
            </template>
            <template v-slot:plus>
              <view class="plus">
                <uv-icon name="plus" size="17">
                </uv-icon>
              </view>
            </template>
          </uv-number-box>
        </template>
        <template v-else>
          <view class="power-count">您还没有{{tabIndex == 0?'点亮':'助力'}}资格套票</view>
          <uv-steps :customStyle="{width:'100%'}" v-if="showPowerDialog">
            <uv-steps-item :title="tabIndex == 0?'获取资格':'获取资格'" desc=""></uv-steps-item>
            <uv-steps-item :title="tabIndex == 0?'选择影院':'选择选手'" desc=""></uv-steps-item>
            <uv-steps-item :title="tabIndex == 0?'确认票数':'确认票数'" desc=""></uv-steps-item>
          </uv-steps>
        </template>
      </view>
    </uv-modal>
    <uv-popup ref="buCouponRef" round="12" mode="bottom" 
            custom-style="height: 72vh;" 
            bgColor="#f5f5f5" 
            :closeable="true"
            @change="toggleMask"
            closeIconPos="top-right">
            <buyCoupon v-if="isBuyCoupon"/>
		</uv-popup>
    <Tabbar index="3"/>
  </view>
</template>

<script setup lang="ts">
const app = getApp()
import { ref,computed , getCurrentInstance} from 'vue'
import { useUCenterStore } from '@/stores/uCenter'
import Tabbar from '@/components/tabbar'
import CinemaList from '@/components/power/cinema.vue'
import ActorList from '@/components/power/actor.vue'
import buyCoupon from '@/components/power/buyCoupon'
import { onLoad } from "@dcloudio/uni-app"
const store = useUCenterStore()
const member = computed(() => {
  return store.memberInfo
})
import { wzCinemaList , wzActorList , wzCinemaDetaill , wzActorDetaill , wzCinemaMilestones , wzActorMilestones , getActorPowerNum , getCinemaPowerNum , exPowerNum} from "@/api/baseData"
const popupRef = ref()
const dialogRef = ref()
const powerTabs = ref<any>(['点亮影城','为选手助力'])
const tabIndex = ref<any>(0)
const isConfirm = ref<any>(true)
const powerNum = ref<any>(1)
const myPowerCount = ref<any>(0)
const changeTab = (index : any) => {
  tabIndex.value = index
}
const isBuyCoupon = ref<any>(false)
const buCouponRef = ref()
const toggleMask = (e : any) => {
  isBuyCoupon.value = e.show
  isLockScroll.value = e.show
}
const isLockScroll = ref<any>(false)
const toggleLock = (e : any) => {
  isLockScroll.value = e.show
}
const showPowerDialog = ref<any>(false)
const powerDialog = () => {
  if(tabIndex.value == 1){
    getActorPowerNum({}).then(res => {
      myPowerCount.value = res.data
      powerNum.value = res.data
      showPowerDialog.value = res.data == 0
      dialogRef.value.open()
    })
  }else{
    getCinemaPowerNum({}).then(res => {
      myPowerCount.value = res.data
      powerNum.value = res.data
      showPowerDialog.value = res.data == 0
      dialogRef.value.open()
    })
  }
}

const getMyPowerNum = () => {
  if(tabIndex.value == 1){
    getActorPowerNum({}).then(res => {
      myPowerCount.value = res.data
      powerNum.value = res.data
      showPowerDialog.value = res.data == 0
      dialogRef.value.open()
    })
  }else{
    getCinemaPowerNum({}).then(res => {
      myPowerCount.value = res.data
      powerNum.value = res.data
      showPowerDialog.value = res.data == 0
      dialogRef.value.open()
    })
  }
}

const powerShare = () => {
  if(!checkLogin())return ;
  uni.setStorage({
    key: 'actor',
    data: Actor.value.player
  })
  uni.navigateTo({
    url:'/pages/milestones/share'
  })
}
const checkLogin = () => {
  if(!member.value.mobile){
    //存储当前路由地址，授权完毕回调
    store.$patch((state) => {
        state.redirectPath = '/pages/milestones/index'
    })
    uni.navigateTo({
      url: '/pages/auth/index'
    })
    return false
  }else return true
}
const powerConfirm = () => {
  if(!checkLogin())return ;
  if(myPowerCount.value > 0){
    exPowerNum({
      powerNum:powerNum.value,
      relateId:(tabIndex.value == 1?Actor.value.player.id:Cinema.value.cinema.id),
      tag:(tabIndex.value == 1?'player':'cinema')
    }).then(res => {
      if(res.success){
        uni.showToast({icon:'success',title:(tabIndex.value == 1?'助力成功':'点亮成功')})
        dialogRef.value.close()
        if(tabIndex.value == 1) getActorMilestines(Actor.value.player.id)
        else getCinemaMilestines(Cinema.value.cinema.id)
        getMyPowerNum()
      }else{
        uni.showToast({icon:'none',title:res.msg})
      }
    })
  }else{
    buCouponRef.value.open()
  }
}
const cinemaPowerTexts = ref<any>([
  '预观影人数满1314人，影院部署6人冠军打卡合影框',
  '预观影人数满2200人，影院提供人行立牌（人物根据专场情况，500人/选手）',
  '预观影人数满5000人，商业综合体在商场内设置影片专门的VI表示（门口、扶梯动线指引牌、中庭跨层俯拍地贴）',
  '预观影人数满8000人，商业综合题大屏播放选手片花',
  '预观影人数满1W人，商业综合体悬挂大型吊旗',
  '预观影人数满2W人，扶手梯贴膜（青春走廊）',
  '预观影人数满5W人，商场外立面大屏/大幅海报',
  '预观影人数满8W人，商场外立面大屏/大幅海报'
])

const actorPowerTexts = ref<any>([
  {text:'预观影人数每满1314人次，解锁1款，对应选手票根（共xx款/角色，每张票限购1款）',istyle:'180rpx',pstyle:"left:-22rpx;"},
  {text:'预观影人数满2200人次，解锁1款，对应选手语录杯套（共xx款/角色，每张票限购1款）',istyle:'155rpx',pstyle:"left:-14rpx;"},
  {text:'预观影人数满5000人次，解锁1款，对应选手透卡（共xx款/角色，每张票限购1款）',istyle:'180rpx',pstyle:"left:-24rpx;"},
  {text:'预观影人数满8000人次，解锁1款，对应选手海报（共xx款/角色，每张票限购1款）',istyle:'198rpx',pstyle:"left:-36rpx;"},
  {text:'预观影人数满1W人次，解锁1款，对应选手徽章/PIN（共xx款/角色，每张票限购1款）',istyle:'150rpx',pstyle:"left:-7rpx;"},
  {text:'预观影人数满2W人次，解锁1款，对应选手集训立拍得照片（小卡印刷）（共xx款/角色，每张票限购1款）',istyle:'150rpx',pstyle:"left:-5rpx;"},
  {text:'预观影人数满3W人次，解锁对应选手，应援T恤衫',istyle:'160rpx',pstyle:"left:-6rpx;"},
  {text:'预观影人数满5W人次，解锁对应选手，学习/工作系列（笔、书签、文件夹）',istyle:'160rpx',pstyle:"left:-6rpx;"},
])

const Actor = ref<any>({})
const changeActor = (actor : any) => {
  getActorMilestines(actor.id)
  popupRef.value.close()
}
const Cinema = ref<any>({})
const changeCinema = (cinema : any) => {
  getCinemaMilestines(cinema.id)
  popupRef.value.close()
}

const getCinemaMilestines = (cid : any) => {
  wzCinemaMilestones({cinemaId:cid}).then((res : any) => {
    Cinema.value = res.data
  })
}

const getActorMilestines = (playerId : any) => {
  wzActorMilestones({playerId:playerId}).then((res : any) => {
    Actor.value = res.data
  })
}

const cinemaActivity = ref<any>([])
const actorActivity = ref<any>([])
onLoad(async (options) => {
  const { proxy } = getCurrentInstance();
  await proxy.$onLaunched;
  const paramsMap = {}
  if(options.scene){
    const usp = decodeURIComponent(options.scene)
    const params = usp.split('&')
    params.forEach(item => {
      const temp = item.split('=')
      paramsMap[temp[0]] = temp[1]
    })
  }
  wzCinemaDetaill({}).then(res => {
    cinemaActivity.value = res.data
  })
  wzActorDetaill({}).then(res => {
    actorActivity.value = res.data
  })
  if(paramsMap.inviterId){
    uni.setStorage({key:'invite',data:paramsMap.inviterId})
  }
  if(paramsMap.actorId){
    getActorMilestines(paramsMap.actorId)
    tabIndex.value = 1
  }else{
    wzActorList({
        pageSize:1,
        pageNo:1
    }).then(res => {
      getActorMilestines(res.data.records[0].id)
    })
  }
  if(options.tabIndex)tabIndex.value = options.tabIndex

  wzCinemaList({
      pageSize:1,
      pageNo:1
  }).then(res => {
      getCinemaMilestines(res.data.records[0].id)
  })

  uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          console.log('当前位置的经度：' + res.longitude);
          console.log('当前位置的纬度：' + res.latitude);
        }
  });
})
</script>

<style lang="scss">
.milestones{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:100vw;
  overflow: hidden;
  overflow-y: scroll;
}

.power-tab{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:180upx 52upx 70upx;
}
.power-tab-item,.power-button{
    height: 62upx;
    line-height: 62upx;
    width: 220upx;
    text-align: center;
    padding: 3upx;
    display: flex;
    margin: 0 42upx;
    border-radius: 72upx;
    overflow: hidden;
    .power-tab-item-inner,.power-button-inner{
      width:100%;
      background:#fff;
      color:#333;
      border-radius: 72upx;
    }
    &.power-tab-item-active,&.power-button-fill{
      .power-tab-item-inner,.power-button-inner{
        background:transparent;
        color:#fff;
      }
    }
}
.power-button{
  height: 82upx;
  line-height: 82upx;
  width: 72%;
  margin: 42upx auto;
  color:#000;
  padding:6upx;
  font-size: 32upx;
  font-weight: 600;
  .power-button-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    .uv-icon{
      margin-right: 32upx;
    }
  }
}
.power-body{
  padding:0 32upx 32upx;
  width:100%;
  box-sizing: border-box;
  .power-label{
    width:100%;
    height:163upx;
    background-position: center;
    background-size:cover;
    margin:0 auto 52upx;
  }
  .power-desc{width:72%;margin:16upx auto;}
}
.power-cinema-name{
  font-weight: 600;
  font-size:42upx;
  padding:0 0 22upx;
  text-align: center
}

.power-leave{
  display:flex;
  justify-content: center;
  align-items: center;
  font-size: 42upx;
  font-weight: 600;
  color:rgb(245,238,182);
  image{
    width:36upx;
    height:36upx;
    margin-right: 24upx;
  }
}
.power-total{
  font-size:52upx;
  color:#dec091;
  font-weight: 600;
  position: relative;
  .power-total-line{
    position: absolute;
    right:-52upx;
    bottom: -17px;
    height: 12upx;
    width:92%;
    background:linear-gradient(136deg, transparent 10%, #dec091 100%);
  }
}
.power-list-box{
  padding: 52upx 0 0 0;
  .power-list-item{
    margin-top: 72upx;
    display: flex;
    justify-content: space-between;
    position: relative;
    color: #fff;
    border-radius: 52upx;
    .textbox{
      padding: 22rpx 22rpx 22rpx 180rpx;
      width: 76%;
      font-size: 26rpx;
    }
    .imagebox{
      width: 160rpx;
      height: 160rpx;
      position: absolute;
      top: 50%;
      left: -9rpx;
      transform: translateY(-50%);
      image{
        width: 160upx;
        height: 160upx;
        border-radius: 204upx;
      }
    }
    .actorImageBox{
      bottom: -19rpx;
      left: -19rpx;
    }
    .power-status{
      position: absolute;
      right: -6px;
      bottom: -18upx;
      width: 106upx;
      height: 106upx;
      border-radius: 72upx;
    }
  }
}
.flex-betenwen{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 32upx 32upx;
  .power-button{
    width:42%;
  }
}
.power-actor-body{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 52upx;
  .actor-header{
    width:calc(100vw / 4);
    height:calc(100vw / 4);
    border-radius: 200rpx;
    margin-bottom: 32upx;
  }
  .actor-name{
    color:#000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text{
      font-weight: 600;
      font-size: 32upx;
    }
  }
}
.power-ex{
  display:flex;
  flex-direction: column;
  align-items: center;
  padding:52upx 0;
  width:100%;
  image{
    width:160upx;
    height:160upx;
  }
  .power-count{
    padding:32rpx 0 52rpx;
    color:rgb(245,238,182);
    font-size:32upx;
    font-weight: 600;
  }
  .minus {
		width: 28px;
		height: 28px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
	.input {
		padding: 0 10px;
	}
	.plus {
		width: 28px;
		height: 28px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
}
.lockScroll{
  overflow: hidden;
	position: fixed;
}
</style>
